<template>
    <rx-layout>
        <div slot="left"></div>
        <div slot="center">
          <rx-fit ref="rxfit" :isheader="isheader">
            <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
              <div class="table-operator">
                <!--按钮-->
                  <a-button  type="primary" icon="plus">{{$ti18('rxList.newBtn','新建')}}</a-button>
                  <a-dropdown>
                    <a-button style="margin-left: 8px"> {{$ti18('rxList.moreBtn','更多')}} <a-icon type="down" /> </a-button>
                    <a-menu slot="overlay">
                      <rx-menu-item alias="1" class="ant-dropdown-menu-item"><a-icon type="user" />{{$ti18('rxList.editBtn','编辑')}}</rx-menu-item>
                      <a-menu-item key="2"  class="a1324"><a-icon type="delete" />{{$ti18('rxList.delBtn','删除')}}</a-menu-item>
                      <a-menu-item key="3"><a-icon type="user" />{{i18n('form.formTem','表单模板')}}</a-menu-item>
                    </a-menu>
                  </a-dropdown>
                <!--按钮end-->
                <!--搜索策略-->
                  <a-dropdown :trigger="['hover']" :getPopupContainer="(p)=>p.parentNode">
                    <a class="ant-dropdown-link" style="margin: 0 10px">
                        {{$ti18('rxList.all','全部')}}<a-icon type="down" />
                    </a>
                    <a-menu slot="overlay">
                      <a-menu-item key="0">
                          {{$ti18('rxList.all','全部')}}
                      </a-menu-item>
                      <a-menu-item :key="index + 1" v-for="(item,index) in list">
                        <div class="rx-itme">
                          <span class="rx-text">{{ item.name }}</span>
                          <span class="rx-edit">
                            <a-icon class="i-edit" @click="saveEdit(item.data)" type="edit" :title="$ti18('rxList.editBtn','编辑')" />
                            <a-icon class="i-close" @click.stop="itmeClose(item,index)" type="close" :title="$ti18('rxList.delBtn','删除')"/>
                          </span>
                        </div>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>

                  <span class="listSearch" @click="listSearch">
                    <a-icon type="search" />{{$ti18('rxList.searchForBtn','搜索')}}
                  </span>
                <!--搜索end-->
              </div>
              <span class="search-btn-box" >
                <ul class="search-btn-ul">
                  <li v-for="(item,index) of btnList" :key="item.key" @click="oftenUseBtn(index)" :class="{active:btnListActive == index ? true:false}">


                    <a-dropdown :trigger="['contextmenu']">
                    <span>
                      {{item.name}}
                   </span>
                    <a-menu slot="overlay">
                      <a-menu-item key="1" >
                        {{item.name}}
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>

                  </li>
                </ul>
                <span class="search-btn" @click.stop="searchshow" v-if="!isheader">
                  <i class="iconfont iconguolv"></i>{{$ti18('rxList.searchForBtn','搜索')}}
                </span>
              </span>
            </div>

            <!--点击搜索的弹框-->
            <transition name="slide-fade">
                <div class="find-box" v-show="findShow" ref="findBox">
                  <div class="find-tool">
                      <span class="find-text">{{$ti18('rxList.searchForBtn','搜索')}}</span>
                      <span class="findClose" @click="findClose"><a-icon type="close" /></span>
                  </div>
                  <div class="find-btn-tool">
                      <a-button  type="primary">{{$ti18('rxList.searchForBtn','搜索')}}</a-button>
                      <a-button @click="saves">{{$ti18('rxForm.saveBtn','保存')}}</a-button>
                      <a-button >{{$ti18('rxList.resetBtn','重置')}}</a-button>
                  </div>
                  <div class="find-content">
                      <div class="find-content-header">
                          <span class="iputBox">
                              <a-input :placeholder="i18n('form.policyName','策略名称')" />
                              <div>{{i18n('form.queryPolicy','要保存查询策略时，必须填写名称')}}</div>
                          </span>
                          <span class="checkBox">
                              <a-checkbox  >{{i18n('form.public','公开')}}</a-checkbox>
                          </span>
                          <span class="checkBox">
                              <a-checkbox  >{{i18n('form.commonUse','常用')}}</a-checkbox>
                          </span>
                      </div>
                    <div class="find-content-center">

                        <div class="find-item-content">
                            <div class="find-item" v-for="(item,index) of findItem" :key="index">
                                <div class="findSelcetBox">
                                    <a-select  :placeholder="i18n('form.searchField','搜索字段')" :allowClear="true" style="width: 100%">
                                        <a-select-option :value="searchItem.key" v-for="searchItem of item.searchStr">
                                          {{ searchItem.name }}
                                        </a-select-option>
                                    </a-select>
                                </div>
                                <div class="findSelcetBox">
                                    <a-select  :placeholder="i18n('form.comparator','比较符')" :allowClear="true" style="width: 100%" >
                                        <a-select-option :value="compareItem.key" v-for="compareItem of item.compare">
                                          {{compareItem.name}}
                                        </a-select-option>
                                    </a-select>
                                </div>
                                <div class="findInputBox">
                                    <a-input v-model="item.searchVal" :placeholder="i18n('form.searchValue','请输入搜索值','input')" />
                                </div>
                                <div class="closeItem" :title="$ti18('rxList.delBtn','删除')" @click="findCancel(index)">
                                  <span>×</span>
                                </div>
                            </div>
                        </div>

                        <div class="addItemBtn">
                            <span class="findBtnSpan">
                                <a-button class="addbtn" @click="addItem"  block><a-icon type="plus"/>{{$ti18('rxList.addOne','增加')}}</a-button>
                            </span>
                            <span class="perch"></span>
                        </div>

                    </div>
                  </div>
                </div>
            </transition>

            <!--点击搜索的弹框end-->

            <!--点击 过滤 时 的弹框-->
            <div  btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel" @close="closeSearchbar">
              <a-form :layout="colLayout">
                <a-row :gutter="24">
                  <a-col :span="colSpan">

                <a-form-item label="名称11">
                  <a-input placeholder="请输入名称1" />
                </a-form-item>
                  </a-col>
                  <a-col :span="colSpan">
                  <a-form-item label="名称22">
                    <a-input placeholder="请输入名称2"/>
                  </a-form-item>
                  </a-col>
                  <!--当超过三个 才有展开收起 跟 <template v-if="advanced">  </template>配合-->
                  <a-col :span="colSpan" v-if="isheader">
                    <span class="table-page-search-submitButtons">
                      <a-button type="primary"  icon="search" @click="search">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                      <a-button style="margin-left: 4px" @click="cancel">{{$ti18('rxList.resetBtn','重置')}}</a-button>
                      <a @click="toggleAdvanced" style="margin-left: 8px">
                        {{ advanced ? $ti18('rxList.putAwayBtn','收起') : $ti18('rxList.openBtn','展开') }}
                        <a-icon :type="advanced ? 'up' : 'down'" />
                      </a>
                    </span>
                  </a-col>
                  <template v-if="advanced">
                    <a-col :span="colSpan">
                      <a-form-item label="名称33">
                        <a-input placeholder="请输入名称3"/>
                      </a-form-item>
                    </a-col>
                  </template>

                </a-row>
              </a-form>
            </div>
            <!--点击 过滤 时 的弹框end-->

            <!--表格部分-->
            <rx-grid>
              {{i18n('form.isTable','这是表格')}}
            </rx-grid>
            <!--表格部分end-->
          </rx-fit>

          <a-modal v-model="visible" :title="$ti18('rxMsa.tips', '提示')" @ok="handleOk"
                   :zIndex="9999" width="300px" @cancel="handleCancel">
            <p>
              {{i18n('form.sureDelete','您确定要删除这个搜索条件吗？')}}
            </p>
          </a-modal>


        </div>
    </rx-layout>

</template>

<script>
  import {RxLayout,RxFit,Util,BaseList} from "@lowcode/jpaas-common-lib"
  import listWindow from './listWindow'
    export default {
        name: 'list',
      mixins: [BaseList],
        components:{
          RxLayout,
          RxFit,
          Util
        },
        data() {
            return {
              isheader:true,
              btnListActive:0,
              fitSearch:false,
              list:[
                {name:'林雨生',data:{}},
                {name:'高价好',data:{}},
                {name:'李美华',data:{}},
                {name:'张用过',data:{}},
                {name:'胡军',data:{}},
                {name:'神中文',data:{}}
              ],
              btnList:[
                {name:this.$ti18('rxList.all','全部'),key:1},
                {name:this.i18n('form.pendProcess','待处理'),key:2},
                {name:this.i18n('form.processing','处理中'),key:3},
                {name:this.i18n('form.completed','已完成'),key:4}
              ],
              visible:false,
              active:null,
              findShow:false,
              findItem:[
                  {
                      searchStr:[
                          {name:this.i18n('form.processBy','处理人'),key:'clr'},
                          {name:this.i18n('form.processStatus','处理状态'),key:'clzt'},
                      ],
                      compare:[
                          {name:this.i18n('form.eq','等于'),key:'dy'},
                          {name:this.i18n('form.neq','不等于'),key:'bdy'},
                          {name:this.i18n('form.lk','模糊匹配'),key:'mhpp'},
                          {name:this.i18n('form.lek','左模糊查询'),key:'zmhcx'},
                          {name:this.i18n('form.rik','右模糊查询'),key:'ymhcx'}
                      ],
                      searchVal:''
                  },
                  {
                      searchStr:[
                          {name:this.i18n('form.processBy','处理人'),key:'clr'},
                          {name:this.i18n('form.processStatus','处理状态'),key:'clzt'},
                      ],
                      compare:[
                          {name:this.i18n('form.eq','等于'),key:'dy'},
                          {name:this.i18n('form.neq','不等于'),key:'bdy'},
                          {name:this.i18n('form.lk','模糊匹配'),key:'mhpp'},
                          {name:this.i18n('form.lek','左模糊查询'),key:'zmhcx'},
                          {name:this.i18n('form.rik','右模糊查询'),key:'ymhcx'}
                      ],
                      searchVal:''
                  },
              ]
            }
        },
        created(){


        },
        mounted(){
          var _self = this ;
          window.onresize = function () {
            _self.clacHeight();
          }
        },
        methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"listdom",key);
        },
          oftenUseBtn(idx){
            this.btnListActive = idx ;
          },
          closeSearchbar(){
            //关闭过滤弹窗；（点击X触发）
            this.fitSearch = false ;
          },
          saveEdit(data){
            //编辑；


            this.findShow = true ;
          },
          saves(){
            //保存
            this.list.push({
              name:'',
              key:''
            })
          },
          searchshow(){
            //点击过滤显示搜索框
            this.fitSearch = true ;
          },
          search(){
            //点击搜索时调用(过滤弹窗的)
          },
          cancel(){
            //点击取消时调用（过滤弹窗的）
          },

          itmeClose(itm,idx){
            //删除；
            this.visible = true ;
            this.active = idx ;
          },
          handleCancel(){
            //选中的
            this.active = null ;
          },
          handleOk(){
            this.visible = false ;
            if(this.active ||  this.active == 0 ){
              this.list.splice(this.active,1);
            }
          },
          listSearch(){
            //搜索
            this.findShow = !this.findShow  ;
            this.clacHeight();

          },
          findClose(){
            //关闭搜索弹窗
            this.findShow = false ;
          },
          findCancel(idx){
            //删除条件;
            this.findItem.splice(idx,1);
          },
          addItem() {
            let obj ={
              searchStr:[
                  {name:this.i18n('form.processBy','处理人'),key:'clr'},
                  {name:this.i18n('form.processStatus','处理状态'),key:'clzt'},
              ],
              compare:[
                  {name:this.i18n('form.eq','等于'),key:'dy'},
                  {name:this.i18n('form.neq','不等于'),key:'bdy'},
                  {name:this.i18n('form.lk','模糊匹配'),key:'mhpp'},
                  {name:this.i18n('form.lek','左模糊查询'),key:'zmhcx'},
                  {name:this.i18n('form.rik','右模糊查询'),key:'ymhcx'}
              ],
              searchVal:''
            }
            this.findItem.push(obj);
            this.scrollHeight();
          },
          clacHeight(){
            this.$nextTick(function () {
              let _rxfit = this.$refs.rxfit ;
              if(_rxfit){
                let _gridContent = _rxfit.$el.getElementsByClassName('gridContent')[0];
                let _height = _gridContent.offsetHeight ;
                let _findItemContent  = this.$refs.findBox.getElementsByClassName('find-item-content')[0];
                _findItemContent.setAttribute('style',"max-height:"+_height*0.35 + "px");
              }
            })
          },
          scrollHeight(){
            //增加时 让滚动条一直在下;
            this.$nextTick(function () {
              let _findItemContent = this.$refs.findBox.getElementsByClassName('find-item-content')[0];
              if(_findItemContent.scrollHeight>_findItemContent.scrollTop){
                _findItemContent.scrollTop = _findItemContent.scrollHeight;
              }

            })
          }
        }
    }
</script>

<style scoped="scoped">
.rx-itme{
  display: flex;
  justify-content: space-between;
}
.rx-itme .rx-text{
  padding-right: 20px;
}
.rx-itme .rx-edit i{
    padding:2px 5px;
    color: #c0c5cc;
  }
.rx-itme:hover .rx-text,
.rx-itme .i-edit:hover{
  color: #1890ff;
}
.rx-itme .i-close:hover{
  color: red;
}

  .listSearch{
    margin-left:16px;
    cursor: pointer;
  }
  .listSearch i{
    margin-right: 4px;
  }


</style>